<template>
  <div class="sponsornav" @mouseover="showset" @mouseout="hideset">
    <div>
      <div class="logo">
        <img :src="logoimg">
      </div>
      <ul class="navlist clearfix">
        <li class="navbtn active">主页</li>
        <li class="navbtn" @click="clivna(item)" v-for="(item,index) in pageConfig.navList" :key="index">{{item.name}}</li>
      </ul>
    </div>
    <div class="mask" v-show="maskshow">
      <div class="settingbtn" @click="headset" style="right:30px">设置</div>
    </div>
  </div>
</template>

<script>
  import {
    MessageBox
  } from 'element-ui'
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    props: ["data"],
    data: function () {
      return {
        maskshow: false,
        isVip: false,
        role: "0",
      }
    },
    created() {
      var that = this;
      $.ajax("/Event/Sponsor/GetIsVip", {
        type: "post",
        contentType: "application/json",
        headers: {
          ISGZIPDATA: "0"
        },
        data: JSON.stringify({
          sponsorId: that.parameters.sponsorId,
        }),
        success: function (data) {
          that.isVip = data.isVip;
          if (data.vipInfoModule) {
            that.role = data.vipInfoModule.role
          }
        },
        error: function (err) {
          console.log(err)
        }
      });
    },
    computed: {
      ...mapState([
        "pageConfig",
        "parameters"
      ]),
      themeConfig() {
        return this.pageConfig[this.pageConfig.theme]
      },
      logoimg: function () {
        if (this.pageConfig.logoSrc) {
          return this.pageConfig.logoSrc;
        } else {
          return this.data.LogoSrc;
        }
      }
    },
    methods: {
      showset: function () {
        this.maskshow = true;
      },
      hideset: function () {
        this.maskshow = false;
      },
      headset: function () {
        this.$store.commit({
          type: 'showsetbox',
          setMod: 'SetSponsorNav',
          index: -1
        })
      },
      clivna(item) {
        if (item.type == "system") {
          if (item.url == "/Event/publish/create") {
            if (this.isVip) {
              if (this.role == "1") {
                window.location.href = item.url + "?from=sponsorIndex&sponsorId=" + this.data.Id;
              } else {
                MessageBox({
                  title: '提示',
                  message: '您没有权限发布活动。',
                  closeOnClickModal: false
                })
              }
            } else {
              MessageBox({
                title: '提示',
                message: '您未登录或不是该主办方的会员，不允许发布活动。',
                closeOnClickModal: false
              })
            }
          } else {
            window.location.href = item.url + "?sponsorId=" + this.data.Id;
          }
        } else if (item.type == "custom") {
          if (item.newpage) {
            window.open(item.url);
          } else {
            window.location.href = item.url;
          }
        }
      }
    }
  }
</script>
<style scoped lang="less">
  .sponsornav {
    height: 50px;
    padding: 30px 0;
    position: relative;
    .logo {
      height: 100%;
      box-sizing: border-box;
      padding-left: 25px;
      float: left;
      img {
        height: 50px;
      }
    }
    .navlist {
      float: right;
      padding-top: 10px;
      .navbtn {
        float: left;
        width: 90px;
        height: 50px;
        box-sizing: border-box;
        line-height: 50px;
        text-align: center;
        font-size: 16px;
        margin: 0 20px;
        cursor: pointer;
      }
      .active {
        color: #d22c3c;
        border-top: 3px solid #d22c3c;
      }
    }
  }
</style>